<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-col class="box box-pack-start box-align-center">
                <div class="btn tab">
                    <el-input placeholder="搜索" style="margin: 0 5px;" v-model="searchtext">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click.stop="listZy()"></i>
                    </el-input>
                    <el-button class="reset-comfirm-btn" @click="dialogVisible = true"
                        style="margin-right: 5px;">+添加</el-button>
                    <el-upload class="upload-demo" :action="uploadfileurl" :data="upData" :show-file-list="false" multiple
                        :on-success="success" :before-upload="beforeUpload">
                        <el-button class="reset-comfirm-btn" @click="">excel导入</el-button>
                    </el-upload>
                    <el-link :href="mburl" type="primary" style="width: 150px;">下载模板</el-link>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="page.list" height="579" stripe
                    :header-cell-style="{ background: '#F0F1F8', color: '#2F3142' }" border v-loading="loading"
                    element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.1)">
                    <el-table-column label="序号" width="80px" fixed align="center">
                        <template slot-scope="scope">
                            {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="zymc" label="专业(年级)名称" align="center"></el-table-column>
                    <el-table-column prop="zydm" label="专业(年级)代码" align="center"></el-table-column>
                    <el-table-column label="数据来源" width="100" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.datafrom == 1">数据中心</span>
                            <span v-if="scope.row.datafrom == 2">Excel导入</span>
                            <span v-if="scope.row.datafrom == 3">平台添加</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200" fixed="right">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <el-button size="mini" icon="el-icon-edit" type="primary"
                                    @click="handleEdit(scope.row)"></el-button>
                                <el-button size="mini" icon="el-icon-delete" type="danger"
                                    @click="handleDelete(scope.row)"></el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="mt20">
                    <el-pagination @current-change="listZy" background layout="prev, pager, next" :total="page.total"
                        :current-page="page.pageNum" hide-on-single-page></el-pagination>
                </el-col>
            </el-col>
        </el-col>


        <el-dialog title="添加专业信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="addform" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="专业名称" prop="zymc">
                    <el-input v-model="form.zymc" placeholder="请输入专业名称" @input="changezymc"></el-input>
                </el-form-item>
                <el-form-item label="专业代码" prop="zydm">
                    <el-input v-model="form.zydm" placeholder="平台自动生成"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addzy">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="show">
            <el-form :model="list">
                <el-form-item label="专业名称">
                    <el-input v-model="list.zymc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>


<script>
export default {
    data() {
        return {
            show: false,
            maxRole: this.$store.state.maxRole,
            loading: false,
            mburl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/DD316957AD074D95AD60C0D8F2B789BC%E4%B8%93%E4%B8%9A%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xls?Expires=4785463730&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=AH7Oa3GTVgLovZLOo0%2B3EIgQ20s%3D',
            loginInfo: this.$store.state.loginInfo,
            upData: { schoolid: this.$store.state.schoolId },
            uploadfileurl: this.$url.baseURL + "/dzy/impExcelZy",
            page: {
                total: 0,
                pageSize: 10,
                pageNum: 1,
                list: []
            },
            searchtext: '',
            dialogVisible: false,
            form: {
                zymc: '',
                zydm: ''
            },
            // 编辑专业
            list: {
                zymc: '',
                id: ''
            },
            user: this.$store.state.loginInfo.user,
            schoolid: this.$store.state.schoolId,
            rules: {
                zymc: [
                    { required: true, message: '请输入专业名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                zydm: [
                    { required: true, message: '专业代码不能为空', trigger: 'blur' },
                    { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
                ],
            }
        };
    },
    mounted() {
        this.listZy()
    },
    methods: {
        // 编辑
        handleEdit(item) {
            console.log(item);
            this.show = true;
            this.list = { ...item }
        },
        // 取消
        cancelEdit() {
            if (this.list.zymc == '') {
                this.$message.warning('请输入编辑内容！');
                return
            }
            this.show = false
        },
        // 保存
        save() {
            console.log(this.list, 'this.list///////')
            delete this.list.schoolid
            delete this.list.zydm
            delete this.list.datafrom


            this.$api.wyv3.putUpdateZy(this.list).then(res => {
                console.log(res, '/////////')
                if (res.code == '200') {
                    this.$message.success('保存成功！');
                    // 刷新列表
                    this.listZy()
                    this.show = false
                }
            })

            // this.show = false
        },
        listZy(pageNum) {
            this.loading = true;
            let params = {
                schoolid: this.schoolid,
                pageNum: pageNum,
                searchtext: this.searchtext
            };
            this.$ajax.post('/dzy/pagelist', params).then(res => {
                this.loading = false;
                if (res.code == '0') {
                    this.page = res.list
                    console.log(this.page)
                }
            })
        },
        handleDelete(item) {
            let params = {
                schoolid: this.schoolid,
                zydm: item.zydm
            };
            this.$confirm('确定将' + item.zymc + '专业删除嘛？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.Admin.delZy(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('删除成功！');
                        this.listZy();
                    }
                })
            }).catch(() => {
            });
        },
        beforeUpload(file) {
            const fileName = file.name;
            const index = fileName.lastIndexOf(".");
            const ext = fileName.substr(index + 1);
            const arr = ["xls", "xlsx"];
            const isOk = arr.includes(ext);
            if (!isOk) {
                this.$message.warning('导入模板应为xls/xlsx格式！');
                return false;
            }
        },
        success(res) {
            if (res.errinfo == "") {
                this.listZy();
                this.$message.success("导入成功")
            } else {
                this.$message.error(res.errinfo)
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        addzy() {
            this.$refs['addform'].validate((valid) => {
                if (valid) {
                    this.$ajax.post('/dzy/addzy', { zymc: this.form.zymc, zydm: this.form.zydm, schoolid: this.schoolid }).then(res => {
                        if (res.result == 'exist') {
                            this.$message.error('专业代码重复！请修改专业名称或专业代码');
                        } else {
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                            this.listZy();
                            this.dialogVisible = false;
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        changezymc() {
            this.$ajax.post('/dzy/getzymc', { zymc: this.form.zymc, schoolid: this.schoolid }).then(res => {
                this.form.zydm = res.zydm
            })
        }
    }
}
</script>

<style scoped lang="scss">
.main {
    position: relative;
    height: 100%;
}

.posa {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    background-color: #fff;

    h3 {
        font-size: 18px;
    }

    .label {
        display: block;
        width: 76px;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        font-size: 15px;
        margin-right: 10px;
    }

    .btn {
        // width: 120px;
        // height: 36px;
        // line-height: 36px;
        // background: #F3F4FB;
        // border: 1px solid #626BF1;
        // color: #626BF1;
        // border-radius: 10px;
        // cursor: pointer;
        // font-size: 16px;
        display: flex;
    }
}

.tab {
    // padding: 0 85px;
}

.height {
    height: 100%;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.delete-btn {
    display: block;
    padding: 3px 5px;
    width: 64px;
    height: 24px;
    line-height: 24px;
    background: linear-gradient(-13deg, #F97762, #F89F9F);
    border-radius: 12px;
    color: #fff;
}
</style>
